/* settings webview */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WUI", "Ubuntu", sans-serif;
    color: var(--vscode-foreground);
    background-color: var(--vscode-sideBar-background);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: text;
    -webkit-user-select: text;
}

main {
    padding: 20px;
}

main > h1 {
    font-size: 22px;
    margin-block-end: 20px;
}

inlang-settings {
    /* Primary */
    --inlang-color-primary: var(--vscode-button-background);
    --inlang-color-neutral: var(--vscode-foreground);
    /* Input */
    --sl-input-background-color: var(--vscode-input-background);
    --sl-input-background-color-disabled: var(--vscode-input-background);
    --sl-input-border-color: var(--vscode-input-border);
    --sl-input-border-color-hover: var(--vscode-input-activeBorder);
    --sl-input-border-color-focus: var(--vscode-input-activeBorder);
    --sl-input-border-radius: 4px;
    --sl-input-border-width: 1px;
    --sl-input-color: var(--vscode-input-foreground);
    --sl-input-color-hover: var(--vscode-input-foreground);
    --sl-input-color-focus: var(--vscode-input-foreground);
    --sl-input-color-disabled: var(--vscode-disabledForeground);
    --sl-input-focus-ring-color: var(--vscode-focusBorder);
    --sl-input-icon-color: var(--vscode-input-foreground);
    --sl-input-icon-color-hover: var(--vscode-input-foreground);
    --sl-input-icon-color-focus: var(--vscode-input-foreground);
    --sl-input-placeholder-color: var(--vscode-input-foreground);
    --sl-input-placeholder-color-disabled: var(--vscode-disabledForeground);
    /* Input Filled */
    --sl-input-filled-background-color: var(--vscode-input-background);
    --sl-input-filled-background-color-hover: var(--vscode-input-background);
    --sl-input-filled-background-color-focus: var(--vscode-input-background);
    --sl-input-filled-background-color-disabled: var(--vscode-input-background);
    --sl-input-filled-color: var(--vscode-input-foreground);
    --sl-input-filled-color-hover: var(--vscode-input-foreground);
    --sl-input-filled-color-focus: var(--vscode-input-foreground);
    --sl-input-filled-color-disabled: var(--vscode-disabledForeground);
    --sl-input-help-text-color: var(--vscode-descriptionForeground);
    /* Focus Ring */
    --sl-focus-ring-color: var(--vscode-focusBorder);
    --sl-focus-ring-width: 3px;
    --sl-focus-ring-offset: 1px;
    /* Tooltip */
    --sl-tooltip-background-color: var(--vscode-button-background);
    --sl-tooltip-color: var(--vscode-button-foreground);
    /* Panels */
    --sl-panel-background-color: var(--vscode-sideBar-background);
    --sl-panel-border-color: var(--vscode-sideBar-background);
    --sl-panel-border-width: 1px;
}

inlang-settings::part(base) {
    gap: 36px;
}

inlang-settings::part(module) {
    gap: 28px;
}


inlang-settings::part(property-title) {
    font-size: 16px;
    font-weight: 600;
}

inlang-settings::part(property-paragraph) {
    font-size: 14px;
    color: var(--vscode-descriptionForeground);
}

inlang-settings::part(option-wrapper) {
    background-color: var(--vscode-input-background);
}

inlang-settings::part(option) {
    color: var(--vscode-input-foreground);
    background-color: var(--vscode-input-background);
    font-size: 14px;
    padding: 8px 12px;
}

/* FIXME: after https://linear.app/opral/issue/INLMC-51/not-able-to-style-dropdown */
inlang-settings[aria-selected="true"]::part(option) {
    background-color: var(--vscode-button-background);
    color: var(--vscode-button-foreground);
}

inlang-settings::part(button) {
    color: var(--vscode-button-secondaryForeground);
    background-color: var(--vscode-button-secondaryBackground);
    border-color: var(--vscode-button-secondaryBackground);
}

inlang-settings::part(float) {
    background-color: var(--vscode-sideBar-background);
    color: var(--vscode-sideBar-foreground);
    border: 1px solid var(--vscode-sideBar-border);
}
inlang-settings::part(cancel) {
    background-color: var(--vscode-button-secondaryBackground);
    color: var(--vscode-button-secondaryForeground);
}
